<template>
	<view class="container">
		<view class="header" id="header">
			<view class="btn-search">
				<u-search action-text="搜索" :show-action="true" v-model="deviceFaultRecord.keyword" placeholder="请输入设备号"
					:animation="true" @search="formatData()" @custom="formatData()"></u-search>
			</view>
			<view>
				<uDropdown ref="uDropdown">
					<uDropdownItem v-model="value1" :title="labelStoreName?labelStoreName:options1[0].label"
						:options="options1" @change="merchantChange">
					</uDropdownItem>
					<uDropdownItem v-model="value2" :title="labelTypeName?labelTypeName:options2[0].label"
						:options="options2" @change="typeChange">
					</uDropdownItem>

				</uDropdown>
			</view>
		</view>

		<view class="content">
			<scroll-view scroll-y @scrolltolower="reachBottom" :style="[{height: height + 'px'}]" lower-threshold="200"
				v-if="deviceFaultRecordList.length>0">
				<view class="card" v-for="(item,index) in deviceFaultRecordList" :key="index">
					<view class="detail-line">

					</view>
					<view class="detail-line-title">
						<view style="display: flex;">
							<view class="title-tips">时间：</view>
							<view class="tableFont">
								{{$date.dateFormatYMDHMS(item.createTime)}}
							</view>
						</view>
						<view class="tableFont-name">{{item.name?item.name:"未知"}}</view>

					</view>
					<u-line margin="10px"></u-line>
					<view class="detail-line">
						<view class="title-tips">设备号：</view>
						<view class="tableFont">{{item.deviceNo}} - {{item.deviceTypeName}}</view>
					</view>
					<view class="detail-line">
						<view class="title-tips">场地：</view>
						<view class="tableFont">{{item.storeName?item.storeName:"暂无场地"}}</view>
					</view>

					<view class="detail-line-title-1">
						<view style="display: flex;">
							<view class="title-tips">故障码：</view>
							<view class="tableFont">
								{{item.fault}}
							</view>
						</view>
						<view class="btn" v-if="!item.state || item.state!=1"><u-button type="primary" plain size="small"
								shape="circle" @click="updateState(item)">确认处理</u-button></view>
						<view v-else class="tableFont">已处理</view>
					</view>


				</view>
				<u-loadmore :status="loadmoreStatus" :load-text="loadingText" style="padding: 30rpx 0 70rpx 0;" />
			</scroll-view>
			<u-empty text='暂无故障数据' mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
			<u-modal :show="show" title="温馨提示" :showCancelButton = "true" content='请确保此故障已处理完成,已完成点击确认' 
			@cancel = "close()" @confirm = "confirm()" @touchmove.stop.prevent="moveHandle"></u-modal>
		</view>
		<view class="footer" id="footer">
			<view class="stat">
				
				<view>
					已处理: {{stateEqualsOneCount}}条
				</view>
				<view style="margin-left: 20rpx;">
					待处理: {{stateZeroOrNullCount}}条
				</view> 
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				height: 0,
				loadmoreStatus: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				value1: -1,
				value2: -1,
				labelStoreName: '',
				labelTypeName: '',
				options1: [{
					label: '设备场地',
					value: '-1'
				}],
				options2: [{
					label: '设备类型',
					value: '-1'
				}],
				deviceFaultRecordList: [],
				deviceFaultRecord: {
					merchantStoreId: -1,
					deviceTypeId: -1,
					keyword: '',
					pageNum: 1,
				},
				clickItem:{},
				stateZeroOrNullCount:0,//未处理
				stateEqualsOneCount:0,//已处理
			}
		},
		mounted() {
			this.queryHeight();
		},
		onLoad() {
			this.deviceType()
			this.merchantStore()
			this.formatData();
		},
		onPullDownRefresh() {
			this.formatData();
		},
		methods: {
			merchantStore() {
				this.$api('merchantStore.findAllMerchantStoreByUserId').then(res => {
					uni.hideLoading();
					if (res.status == 0) {
						let stat = res.data;
						stat.forEach(item => {
							this.options1.push({
								label: item.storeName,
								value: item.id,
								check: item.check
							})

						})
					} else {
						getApp().err('请求数据不成功:' + res.msg);
					}
				})
			},
			deviceType() {
				this.$api('deviceType.curr').then(res => {
					if (res.status == 0) {
						let stat = res.data;
						stat.forEach(item => {
							this.options2.push({
								label: item.deviceTypeName,
								value: item.id
							})
						})
					} else {
						getApp().err('请求数据不成功:' + res.msg);
					}
				})
			},
			findDeviceFaultRecord() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$api('deviceFaultRecord.findDeviceFaultRecord', this.deviceFaultRecord).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.data != null) {
						this.deviceFaultRecordList.push(...res.data.list)
						this.deviceFaultRecord.pageNum = res.data.pageNum;
						if (this.deviceFaultRecord.pageNum >= res.data.pages) {
							this.loadmoreStatus = 'nomore';
							return;
						}
					} else {
						this.$helpers.toast('获取故障列表失败:' + res.msg);
					}
				})
			},
			statRecord() {
				this.$api('deviceFaultRecord.statRecord', this.deviceFaultRecord).then(res => {
					if (res.data != null) {
						this.stateEqualsOneCount = res.data.stateEqualsOneCount;
						this.stateZeroOrNullCount = res.data.stateZeroOrNullCount;
						console.log(this.stateEqualsOneCount)
					} else {
						this.$helpers.toast('获取故障条数失败:' + res.msg);
					}
				})
			},
			confirm(){
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				
				if (!this.clickItem.id) {
					uni.hideLoading();
					this.$helpers.toast("请选择处理的故障信息");
					return
				}
				this.$api('deviceFaultRecord.updateState', this.clickItem).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.status == 0) {
						this.$helpers.toast("处理完成");
						this.close();
						this.formatData();
					} else {
						this.$helpers.toast('处理失败:' + res.msg);
					}
				})
			},
			updateState(item) {
				this.show = true;
				this.clickItem = item;
				
			},
			close(){
				this.show = false;
				this.clickItem = {};
			},
			merchantChange(e) {
				this.labelStoreName = e.label;
				this.deviceFaultRecord.merchantStoreId = e.value;
				this.formatData();
			},
			typeChange(e) {
				this.labelTypeName = e.label;
				this.deviceFaultRecord.deviceTypeId = e.value;
				this.formatData();
			},
			queryHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#header').boundingClientRect()
				query.select('#footer').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.height = windowHeight - 20;
					console.log(res)
					for (var i = 0; i < res.length; i++) {
						this.height -= res[i].height;
					}
				})
			},

			formatData() {
				this.deviceFaultRecord.pageNum = 1;
				this.loadmoreStatus = "loadmore";
				this.deviceFaultRecordList = [];
				this.findDeviceFaultRecord();
				this.statRecord();
			},

			reachBottom() {
				console.log("-------------下拉加载--------------")
				if (this.loadmoreStatus == 'nomore') {
					return;
				}
				this.loadmoreStatus = 'loading';
				// 使用延迟实现加载动画效果
				setTimeout(() => {
					this.deviceFaultRecord.pageNum = ++this.deviceFaultRecord.pageNum;
					this.findDeviceFaultRecord();
					this.statRecord();
					this.loadmoreStatus = 'loadmore';
				}, 2000)
			},

			// 防止遮罩层滚动穿透
			moveHandle() {},

		}
	}
</script>

<style lang="scss">
	.u-button {
		height: 70rpx !important;
	}

	.title {
		font-size: $f-lg;
		margin-bottom: 20rpx;
	}
	.footer {
	    z-index: 99;
	    border-top: 1px solid #fafafa;
	    width: 100%;
	    position: fixed;
	    bottom: 0rpx;
	    // padding: 0 30rpx 30rpx 30rpx;
	    font-size: $f-base;
	  }
	.stat{
		display: flex;
		align-items: center;
		font-size: $f-lg;
		color: white;
		padding: 20rpx 40rpx;
		margin: 0 30rpx 30rpx 30rpx;
		border-radius: 20rpx;
		background-color: $u-primary;
	}
	.container {
		.content {
			padding: $u-padding-medium;

			.card {
				background-color: #fff;
				padding: $u-padding-medium;
				border-radius: 20rpx;
				margin-bottom: $u-margin-medium;

				.detail {
					display: flex;
					justify-content: space-between;

					.text {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.device-mobile {
							font-size: $uni-font-size-sm;
							margin-left: $u-margin-medium;

							.device {
								color: $u-tips-color;
							}
						}
					}
				}

				.detail-line-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10rpx 0;
				}
				.detail-line-title-1 {
					display: flex;
					justify-content: space-between;
					margin: 10rpx 0;
				}

				.detail-line {
					display: flex;
					margin: 10rpx 0;
				}

				.title-tips {
					width: 120rpx;
					font-size: $f-base;
					color: rgba(0, 0, 0, 1);
				}


				.feedback {
					margin-top: $u-margin-medium;
					margin-left: 90rpx;
					font-size: $uni-font-size-base;
					line-height: 50rpx;
				}

				.btn {
					width: 200rpx;
				}
			}
		}


		.tableFont {
			font-size: $f-base;
			color: $u-tips-color;
		}

		.tableFont-name {
			font-size: 38rpx;
			color: coral;

		}


		.header {
			background-color: white;

			.btn-search {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: $f-sm;
				padding: 30rpx;
			}
		}
	}
</style>
